<template>
  <div class="security-guest">
    <div class="header-box">
      <group-title :style="{ width: '375px' }"/>
      <div class="search-box flex-center">
        <search-bar
            :style="{ zIndex: 3 }"
            date
            placeholder="搜索更多人员信息"
            @dateChange="dateChange"
            @search="onSearch"
        />
      </div>
    </div>
    <!--    <div ref="scrollList" class="event-box" @scroll="scrollEvent">-->
    <!--      <event-info-->
    <!--          v-for="(item, index) in visitor"-->
    <!--          :key="index"-->
    <!--          :columns="eventColumn"-->
    <!--          :datas="item"-->
    <!--          :style="{ height: '360px' }"-->
    <!--          @click="onEventClick(item.visitorId)"-->
    <!--      />-->
    <!--    </div>-->

    <div ref="scrollList" class="event-box" @scroll="scrollEvent">
      <template v-for="securityGuest in visitor">
        <category-title :title="securityGuest.title"/>
        <div class="event-group">
          <event-info
              v-for="(item, index) in securityGuest.datas"
              :key="index"
              :columns="eventColumn"
              :datas="item"
              :style="{ height: '360px' }"
              @click="onEventClick(item.visitorId)"
          />
        </div>
      </template>
    </div>
  </div>

</template>

<script setup>
import {inject} from "vue";
import {eventColumn} from "./data.js";

import SearchBar from "@/components/customs/search-bar";
import GroupTitle from "@/components/customs/group-title/index.vue";
import EventInfo from "@/components/customs/event-info/index.vue";
import {VisitorList, VisitorTime} from "@/common/customs/security";
import {reactive, ref} from "@vue/reactivity";
import {onMounted} from "@vue/runtime-core";
import CategoryTitle from "@/components/customs/category-title/index.vue";
import dayjs from "dayjs";

const onPageChange = inject("pageChange");
const smartObject = inject("smartObject");
const visitor = ref([]);
const time = ref([]);
const scrollList = ref();
const pageConfig = reactive({
  params: {
    page: 1,
    page_size: 5,
    entryTime: "",
    name: "",
  },
  total: 0,
  loading: false,
  isEnd: false,
});
const onEventClick = (id) => {
  smartObject.isFk = true;
  smartObject.msr = id;
  onPageChange(24);
};
const getData = async (arr) => {
  let list = await Promise.all(arr.map(async i => {
    const api = new VisitorList();
    i.pageConfig = {
      page: 1,
      page_size: 50,
      entryTime: i.nyq,
    };
    api.params({
      ...i.pageConfig,
    });
    await api.send();
    const {data} = await api.getDatas();
    let date = dayjs(i.nyq);
    let newDate = new Date().getDate();
    let now = dayjs();
    i.title = date === now ? "今天" : date === now.subtract(1, 'day') ? "昨天" : i.nyq;
    i.total = data.total;
    i.datas = data.data.map(item => {
      return {
        ...item,
        visitorType: item.visitorType === -1 ? "员工" : ["", "普通访客", "预约访客", "", "黑名单"][item.visitorType],
        _title: item.visitorName,
        _type: "red",
        _tag: {
          type: "fill-blue",
          text: ["已发起", "待审核", "审核中", "待访问", "已到达", "已过期", "访客取消", "用户撤销", "审核未通过"][item.visitorStatus],
        },
      };
    });
    i.unfold = true;
    return i;
  }));
  return list;
};

const getSB = async (nextPage = false) => {
  if (!nextPage) {
    pageConfig.params.page = 1;
    visitor.value = [];
  }
  const api = new VisitorTime();
  api.params(pageConfig.params);
  await api.send();
  const {data} = await api.getDatas();
  let arr = await getData(data.data);

  if (nextPage) {
    visitor.value.push(...arr);
  } else {
    pageConfig.params.page = 1;
    console.log(scrollList.value.scrollTop);
    visitor.value = arr;
  }
  pageConfig.loading = false;
  pageConfig.isEnd = pageConfig.params.page >= data.last_page;
};
const onSearch = (text) => {
  pageConfig.params.name = text;
  pageConfig.params.page = 1;
  getSB();
};
const dateChange = (date) => {
  pageConfig.params.entryTime = date ? date.format("YYYY-MM-DD") : "";
  pageConfig.params.page = 1;
  getSB();
};
const scrollEvent = (event) => {
  if (Math.ceil(event.currentTarget.scrollTop + event.currentTarget.clientHeight) >= event.currentTarget.scrollHeight - 30 && !pageConfig.loading) {
    if (!pageConfig.isEnd) {
      pageConfig.params.page++;
      pageConfig.loading = true;
      getSB(true);
    }
  }
};

onMounted(async () => {
  getSB();
  // getData();
});

</script>

<style lang="less" scoped>
@import "./index.less";
</style>
